<template>
  <div>
    <div class="block" width="500px" height="300px">
      <el-carousel trigger="click" type="card">
        <el-carousel-item v-for="item in images" :key="item">
          <img :src="item.url" alt="无图片"/>
          <div>
            <span id="left"> 好评如潮   </span>
            <span id=right"> 销售量:500W</span>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <center>
      <div style="width:15%;border-style:solid;border-width:1px;height: 30px" @click="test()">
        个人
      </div>
    </center>
    <el-divider></el-divider>
      <el-row>
        <el-col :span="6"></el-col>
        <el-col :span="6" v-for="(o,index) in gameList" :key="index">
          <el-card :body-style="{ padding: '0px' }" style="width: 100%;">
            <img :src="images[index].url" class="image" style=";float: right;width: 100%">
            <div style="padding: 0px;float: left;width: 360px">
              <span style="font-size: 30px;">{{gameList[index].gameName }}</span>
              <div class="bottom clearfix">
                <time class="time">发行日期：{{gameList[index].date}}</time>
                <el-button type="text" class="button" style="left: 1px;" @click="shopping(o.gameId)">前往购买</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6"></el-col>
      </el-row>





  </div>
</template>

<script xmlns="http://www.w3.org/1999/html">
export default {
  data() {
    return {
      userGameRel:{
        userId:'',
        gameId:'',
      },
      images: [
        {url: require("@/assets/elderring.png")},
        {url: require("@/assets/shwj8.png")},
        {url: require("@/assets/darksoul.png")},
        {url: require("@/assets/guiqi5.png")},
        {url: require("@/assets/deadspace.png")},
        {url: require("@/assets/hollowknight.png")}
      ],
      gameList: [],
    }
  },
  methods: {
    loadAllGames() {
      let _this = this;
      this.$axios({
        method: 'get',
        url: 'game/allGameList/',
      }).then(res => {
        _this.gameList = res.data.data;
        console.log(_this.gameList)

      }).catch(error=>{
        _this.$message.error(error);
      })
    },

    shopping(gameId){
      let _this=this;
      _this.userGameRel.gameId=gameId;
      console.log(_this.userGameRel);
      this.$axios({
        method:'put',
        url:'game/addGameByUser',
        data:JSON.stringify(_this.userGameRel)
      }).then(res=>{
        _this.$message.success("购买成功")
      }).catch(error=>{
        _this.$message.error(error);
      })
    }
  },
  mounted() {
    this.userGameRel.userId = sessionStorage.getItem('userId');
    this.loadAllGames();
  }

}
</script>


<style>
.el-carousel__item {
  margin: 0px auto;
}

.block {

}

html,
body,
#app,
.el-container {
  height: 99.9%;
  margin-top: 0px;
}

.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.login-one {
  background-color: #1c77ac;
  background-repeat: no-repeat;
  overflow: hidden;
  height: 100%;
}

.el-main,
.el-footer {
  border: 1px blue solid;
}

.left {

  height: 600px;
}

.right {

  height: 600px;
}

.middle {

  height: 600px;
}


</style>
